<template>
  <div>
    <div class="levelWp">
      <div class="circle">
        <slot name="levelBg">
          每关图片
        </slot>
      </div>
      <div class="levelText">
        <p class="title">
            <slot name="num">第一关11</slot>
        </p>
        <p class="title t2">
            <slot name="title">独具慧眼11</slot>
        </p>
        <p class="con">
            秘笈：
            <slot name="key">对IHG够了解吗？先从这里开始暖身吧！11</slot>
        </p>
        <p class="con c2">
            <img class="book" src="../assets/book.png" alt="">
            <slot name="desc">60秒内完成IHG中国旗下酒店logo配对者11</slot>
        </p>
      </div>
    </div>
    <div class="levelMap">
      <img class="mapBg" src="../assets/map-bg.png" alt="">
    </div>
    <div class="startBtn">
      <p style="color:rgb(163,163,163);margin-bottom:15px;"><span style="color:red">*</span>收集钥匙，开启尽炫职旅</p>
      <slot name="btn">
        开始按钮
      </slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.levelWp {
  background-color: rgb(230, 111, 19);
  height: 280px;
  position: relative;
  overflow: hidden;
}
.circle {
  background-color: #fff;
  width: 154px;
  height: 154px;
  border-radius: 50%;
  position: absolute;
  left: 83px;
  bottom: -56px;
}
.levelText {
  display: flex;
  flex-flow: column;
  text-align: center;
  margin-top: 35px;
}
.title{
    color: rgb(252, 255, 0);
    font-size: 31px;
}
.t2{
    font-size: 23px;
    margin: 10px 0 15px;
}
.con{
    color:#fff;
    font-size: 13px;
}
.book{
  width: 43px;
  height: 29px;
  margin:0px 7px 0 12px;
}
.c2{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  margin-top: 5px;
}
.levelMap{
  margin: 12px 15px;
}
.mapBg{
  width: 288px;
  height: 129px;
}
.startBtn{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
</style>
